<html>
	<head>

		<title></title>
		<link rel="stylesheet" href="style.css">	
		<script src="jquery-1.11.0.js"></script>
		<script src="gen.js"></script>
		
		<script>
			//declaring global variables
			var t;
			var currID;
			var viewID;
			
			//makes a synchronous call to the page u and return the 
			//result as object
			function syncAjax(u){
				var obj=$.ajax(
					{url:u,
					 async:false
					 }
				);
				return $.parseJSON(obj.responseText);
				
			}
			
			//An edit function which takes in the present data and stores any changes made
			function edit(obj,id,event){
				var r=getDistrict(id);
				currID = id;
				if(r.result==0){
					//show error message
					document.getElementById("divStatus").innerHTML=r.message;
					$("#divStatus").text(r.message);
					return;
				}
				//get the data from object r and put it in the form
				$("#district_name").prop("value", r.district.district_name);
				$("#district_capital").prop("value", r.district.district_capital);
				$("#region_id").prop("value", r.district.region_id);
				//show the form
				//find where the user clicked and store it in x and y
				var y=event.clientY;
				var x=event.clientX/2;
				//use x and y to set the location of the form
				$("#divEdit").hide();
				$("#divAdd").hide();
				$("#divEdit").css("top",y);
				$("#divEdit").css("left",x);
				//display the form
				$("#divEdit").fadeIn(900);
				$("#eid").show();
			}
			
			//An add function which allows a user to enter a new set of data 
			function add(obj,event){
				//show the form
				//find where the user clicked and store it in x and y
				$("#divEdit").hide();
				$("#divAdd").hide();
				var y=event.clientY;
				var x=event.clientX/2;
				//use x and y to set the location of the form
				
				$("#divAdd").css("top",y);
				$("#divAdd").css("left",x);
				//display the form
				$("#divAdd").fadeIn(900);
				$("#addid").show();
			}
			
			//A delete function which allows the user to delete a set of data
			function deletet(obj,id,event){
				var r=getDistrict(id);
				currID = id;
				if(r.result==0){
					//show error message
					document.getElementById("divStatus").innerHTML=r.message;
					$("#divStatus").text(r.message);
					return;
				}
				$("#district_id").prop("value", r.district.id);
				var y=event.clientY;
				var x=event.clientX/2;
				//use x and y to set the location of the form
				$("#divEdit").hide();
				$("#divAdd").hide();
				$("#divDelete").css("top",y);
				$("#divDelete").css("left",x);
				//display the form
				$("#divDelete").fadeIn(900);
				$("#did").show();
			}
			//returns a result object for one district
			function getDistrict(id){
			 t=id;
				var u="district_action.php?cmd=1&id="+t;
				return syncAjax(u);
			}
			
			function timedRefresh(timeoutPeriod) {
				setTimeout("location.reload(true);",timeoutPeriod);
			}
			//makes asynchronous call to the save page
			function save(){
				//complete the url
				
				var dn= document.getElementById("district_name").value;
				var dc= document.getElementById("district_capital").value;
				var rd= document.getElementById("region_id").value;
				var u="district_action.php?cmd=3&id="+t+"&dn="+dn+"&dc="+dc+"&rd="+rd;
				r=syncAjax(u);
				$.getJSON(u,saveDone);
				latest_table();
				cancel();
				
			}
			
			//a function to search through the page
			function search(){
				var tx = document.getElementById("txtSearch").value;
				console.log(tx);
				var u="district_action.php?cmd=6&dn="+tx;
				r=syncAjax(u);
				search_table(r);
			}
			//makes asynchronous call to the save the add page
			function saveadd(){
				var dn= document.getElementById("d_name").value;
				var dc= document.getElementById("d_capital").value;
				var rd= document.getElementById("r_id").value;
				var u="district_action.php?cmd=5&id="+t+"&dn="+dn+"&dc="+dc+"&rd="+rd;
			
				r=syncAjax(u);
				$.getJSON(u,saveDone);
				latest_table();
				acancel();
					
			}
			//a function to delete a set of data
			function deletebut(){
				var u="district_action.php?cmd=4&id="+t;
				r=syncAjax(u);
				$.getJSON(u,saveDone);
				latest_table();
				dcancel();
			}
			
			
			function saveDone(data){
				
				//alert(data);
			}
			
			function cancel(){
				//fade out the form 
				$("#divEdit").fadeOut(100);
			}
			function dcancel(){
				//fade out the form 
				$("#divDelete").fadeOut(100);
			}
			function acancel(){
				//fade out the form 
				$("#divAdd").fadeOut(100);
			}
			//a function that gets the id of a region
			function get_region(id){
				
				var v = "region_action.php?cmd=1&id="+id;
				var s= syncAjax(v);
				var a =s.region.regionName;
				return a;
			}
			
			
			function latest_table(){
				var u="district_action.php?cmd=2";
				r= syncAjax(u);
				var table ="<table class='reportTable'><tr class='header'><td>District Name</td><td>District Capital</td><td>Region</td><td>Edit</td><td>Delete</td></tr>";
				if(r.district !=null){
				for(var i=0;i<r.district.length;i++){
					
					table+="<tr><td>"+r.district[i].district_name+"</td><td>"+r.district[i].district_capital+"</td><td>"+get_region(r.district[i].region_id)+"</td><td>"+"<span class='hotspot' onclick='edit(this,"+r.district[i].district_id+",event)'>edit</td><td>"
					+"<span class='hotspot' onclick='deletet(this,"+r.district[i].district_id+",event)'>delete</span></td><td></td></tr>";
					
				}
				table +="</table>";
				if(document.getElementById("divContent")==null){
					console.log("Not yet initialized");
				}
				else {
				document.getElementById("divContent").innerHTML=table;
			}
			}
			}
			
			
			function search_table(r){
			
				console.log(r);	
				var table ="<table class='reportTable'><tr class='header'><td>District Name</td><td>District Capital</td><td>Region</td><td>Edit</td><td>Delete</td></tr>";
			
				if(r.district !=null){
				for(var i=0;i<r.district.length;i++){

					table+="<tr><td>"+r.district[i].district_name+"</td><td>"+r.district[i].district_capital+"</td><td>"+get_region(r.district[i].region_id)+"</td><td>"+"<span class='hotspot' onclick='edit(this,"+r.district[i].district_id+",event)'>edit</span></td><td>"+
					"<span class='hotspot' onclick='deletet(this,"+r.district[i].district_id+",event)'>delete</span></td><td></td></tr>";
					
				}
				table +="</table>";
				if(document.getElementById("divContent")==null){
					console.log("Not yet initialized");
				}
				else {
				$("#divStatus").text("Result found");
				document.getElementById("divContent").innerHTML=table;
			}
			}
			else{
				$("#divStatus").text("No result found");
				$("#divContent").hide();
				}
			}
		</script>
<?php
	include ("region.php");
	$obj = new region();
?>
</head>
<body>
	
		<table>
			<tr>
				<td colspan="2" id="pageheader">
					Health Information System
				</td>
			</tr>
			<tr>
				<td id="mainnav">
					<div class="menuitem">location</div>
					<div class="menuitem">opd cases</div>
					<div class="menuitem">health promotion</div>
					<div class="menuitem">nutrition</div>
					<div class="menuitem">child welfare</div>
					<div class="menuitem">family planning</div>
					<div class="menuitem"><a href="logout.php">logout<a></div>
				</td>
				<td id="content">
					<div id="divPageMenu">
						<span class="menuitem" ><a href="index_users.php">Users</a></span>
						<span class="menuitem" ><a href="index_community_list.php">Communities</a></span>
						<span class="menuitem" ><a href="index_subdistrict_list.php">Sub districts</a></span>
						<span class="menuitem" ><a href="index_district_list.php">Districts</a></span>
						<span class='hotspot' onclick="add(this,event)">Add district</span>
						<input type="text" id="txtSearch">
						<span class='hotspot' onclick='search()'>search</span>						
					</div>
					<div id="divStatus" class="status">
					</div>
					<div id="divContent" name="divContent">
						<script>
						latest_table();
						</script>
					</div>
					
					</td>
			</tr>
		</table>
		

	<div id="divEdit" class="popupForm">
		<table class="tableForm" >
					<tr>
						<td class="label">District Name: </td>
						<td class="field"><input type="text" value="<?php echo $row['district_name'] ?>" id="district_name" ></td>
					</tr>
					<tr>
						<td class="label">District Capital:</td> 
						<td class="field"><input type="text" value="" id="district_capital" >
						</td>
					</tr>
					<tr>
						<td class="label">Region :</td>
						<td class="field">
							<?php
							echo "<select name='region_id' id='region_id'>";
							if(!$obj->get_all_region()){
								echo "Unable to get region";
							}
							$row = $obj->fetch();
							while($row){
								echo "<option value='$row[region_id]' selected>$row[region_name]</option>";
								$row = $obj->fetch();
							}
							echo "</select>";
							?>
						</td>
					</tr>
					<tr>
						<td class="label"></td>
						<td class="field">
							<input type="button" value="save" onclick="save()" >
							<input type="button" value="cancel" onclick="cancel()" >
						</td>
					</tr>
			</table>
				
	</div>
	
	
	
	<div id="divDelete" class="popupForm">
		<table class="tableForm" >
					<tr>
						<td>Are you sure you want to delete </td>
						
					
						<td class="label"></td>
						<td>
							<input type="button" value="Yes" onclick="deletebut()" >
							<input type="button" value="No" onclick="dcancel()" >
						</td>
					</tr>
			</table>
				
	</div>
	<div id="divAdd" class="popupForm">
		<table class="tableForm" >
					<tr>
						<td class="label">District Name: </td>
						<td class="field"><input type="text"  id="d_name"></td>
					</tr>
					<tr>
						<td class="label">District Capital:</td> 
						<td class="field"><input type="text"  id="d_capital" >
						</td>
					</tr>
					<tr>
						<td class="label">Region :</td>
						<td class="field">
						<?php
							echo "<select name='r_id' id='r_id'>";
							if(!$obj->get_all_region()){
								echo "Unable to get region";
							}
							$row = $obj->fetch();
							while($row){
								echo "<option value='$row[region_id]' selected>$row[region_name]</option>";
								$row = $obj->fetch();
							}
							echo "</select>";
						?>
						</td>
					</tr>
					<tr>
						<td class="label"></td>
						<td class="field">
							<input type="button" value="save" onclick="saveadd()" >
							<input type="button" value="cancel" onclick="acancel()" >
						</td>
					</tr>
			</table>
				
	</div>
	</body>
</html>	